<template id='monitorManage'>
  <div class="monitorManage">
    <div class="header">
      <div class="introduce">
        <p class="text">园区告警数据统计</p>
      </div>
      <div class="pieContent">
        <div class="pieChart">
          <DoughnutPieChart
            :doughnutPieData="pieOneOption"
            v-if="pieOneOption.data.length"
          />
        </div>
        <div class="pieChart">
          <DoughnutPieChart
            :doughnutPieData="pieTwoOption"
            v-if="pieTwoOption.data.length"
          />
        </div>
      </div>
    </div>
    <div class="main">
      <div class="introduce">
        <p class="text">DCS单位告警数据</p>
        <el-select
          v-model="enterprise"
          placeholder="请选择企业"
          @change="selectEnterprise"
        >
          <el-option
            v-for="item in enterpriseList"
            :key="item.mineCode"
            :label="item.mineName"
            :value="item.mineCode"
          >
          </el-option>
        </el-select>
      </div>
      <div class="chart">
        <StackedLineChart
          :stackedLineData="warningOption"
          v-if="warningOption.series.length"
        />
      </div>
      <div class="table">
        <SCROLL
          :topData="tableTop"
          @loadingMore="loadingMore"
          :list="tableData"
          style="height: 15vh"
        />
      </div>
    </div>
    <div class="bottom">
      <div class="introduce">
        <p class="text">二道门数据</p>
        <el-select
          v-model="company"
          placeholder="请选择企业"
          @change="selectCompany"
        >
          <el-option
            v-for="item in companyList"
            :key="item.mineCode"
            :label="item.mineName"
            :value="item.mineCode"
          >
          </el-option>
        </el-select>
      </div>

      <div class="tips">
        <!-- <BlueBox
          :title="'当日人数'"
          :stylefont="fontColorA"
          :count="personCount"
        /> -->
        <BlueBox2
          :stylecolor="fontColorA"
          :titleCar="'当日人数'"
          :carNum="personCount"
          :jytcarNum="comparePersonCount"
        />
        <!-- <BlueBox
          :title="'当日车辆数'"
          :stylefont="fontColorB"
          :count="vehicleCount"
        /> -->
        <BlueBox2
          :stylecolor="fontColorB"
          :titleCar="'当日车辆数'"
          :carNum="vehicleCount"
          :jytcarNum="compareVehicleCount"
        />
      </div>
      <div class="chart">
        <BaseLineChart :lineData="twoOption" v-if="flag" />
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import {
  selectCompanyInfo,
  selectCompanyDetail,
  selectAlarmlistTable,
  selectAlarmlistChart,
  selectWarningLeft,
  selectWarningRight,
} from "@/api/monitor";
import BlueBox from "@/components/blueBox.vue";
import BlueBox2 from "@/components/blueBox2.vue";
import BaseLineChart from "@/components/echarts/BaseLineChart.vue";
import StackedLineChart from "@/components/echarts/StackedLineChart.vue";
import DoughnutPieChart from "@/components/echarts/DoughnutPieChart.vue";
import SCROLL from "@/components/Scroll";
export default {
  name: "monitorManage",
  components: {
    BlueBox,
    BlueBox2,
    BaseLineChart,
    StackedLineChart,
    DoughnutPieChart,
    SCROLL,
  },
  // 定义属性
  data() {
    return {
      tableTop: [
        {
          name: "报警时间",
          deindex: "startTime",
        },
        {
          name: "设备名称",
          deindex: "pointName",
        },
        {
          name: "报警值",
          deindex: "realtimeValue",
        },
        {
          name: "状态",
          deindex: "statusName",
        },
      ],
      tableData: [],
      flag: false,
      company: "0",
      personCount: 0,
      comparePersonCount: 0,
      vehicleCount: 0,
      compareVehicleCount: 0,
      companyList: [],
      fontColorA: {
        color: "rgb(247, 248, 149)",
      },
      fontColorB: {
        color: "rgb(4, 242, 254)",
      },
      twoOption: {
        xAxis_data: [],
        series: [],
      },
      warningOption: {
        xAxis_data: [],
        series: [],
      },
      enterprise: "0",
      enterpriseList: [],
      pieOneOption: {
        data: [],
        total: 0,
      },
      pieTwoOption: {
        data: [],
        total: 0,
      },
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //查询所有企业
    async getCompanyList() {
      let res = await selectCompanyInfo();
      this.companyList = res.data.list;
      this.enterpriseList = res.data.list;
      // console.log(res, "res");
    },
    //查询企业人数车辆数折线图
    async selectCompany() {
      let res = await selectCompanyDetail({ code: this.company });
      this.personCount = res.data.nowtotalPerson;
      this.vehicleCount = res.data.nowtotalVehicle;
      this.twoOption.xAxis_data = res.data.xAxis_data.map((item, index) => {
        return item.substring(5);
      });
      this.twoOption.series = res.data.series;
      this.flag = true;
      this.comparePersonCount = res.data.compare_ytdtotalPerson;
      this.compareVehicleCount = res.data.compare_ytdtotalVehicle;
      // console.log(res, "res");
      // console.log(res.data.series, "res.data.series");
    },
    //DCS单位告警数据
    async selectEnterprise() {
      let tableRes = await selectAlarmlistTable({ code: this.enterprise });
      this.tableData = tableRes.data.list.map((item, index) => {
        item.realtimeValue = item.realtimeValue + item.unit;
        return item;
      });
      let lineChartRes = await selectAlarmlistChart({ code: this.enterprise });
      this.warningOption.xAxis_data = lineChartRes.data.xAxis_data.map(
        (item, index) => {
          return item.substring(5);
        }
      );
      let areaStyle = {};
      let emphasis = { focus: "series" };
      lineChartRes.data.series_data.map((item, index) => {
        this.$set(item, "type", "line");
        this.$set(item, "areaStyle", areaStyle);
        this.$set(item, "emphasis", emphasis);
      });
      this.warningOption.series = lineChartRes.data.series_data;
      // console.log(this.warningOption, "this.warningOption");
    },
    loadingMore() {},
    //园区告警数据统计 左
    async selectPieLeft() {
      let res = await selectWarningLeft();
      this.pieOneOption.data = res.data.list;
      this.pieOneOption.title = "当月企业报告次数";
      this.pieOneOption.data.map((item, index) => {
        this.pieOneOption.total =
          parseInt(item.value) + parseInt(this.pieOneOption.total);
      });
      // console.log(res.data.list, "left");
    },
    //园区告警数据统计 右
    async selectPieRight() {
      let res = await selectWarningRight();
      this.pieTwoOption.data = res.data.list;
      this.pieTwoOption.title = "当月告警类型次数";
      this.pieTwoOption.data.map((item, index) => {
        this.pieTwoOption.total =
          parseInt(item.value) + parseInt(this.pieTwoOption.total);
      });
      // console.log(this.pieTwoOption, "right");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCompanyList();
    this.selectCompany();
    this.selectEnterprise();
    this.selectPieLeft();
    this.selectPieRight();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.monitorManage {
  .main,
  .bottom,
  .header {
    margin-top: 0.5vw;
    .introduce {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text {
        font-size: 23px;
        color: #fff;
        font-weight: bold;
      }
      /deep/ .el-input--suffix .el-input__inner {
        background: #0d345b;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .table {
      overflow: hidden;
    }
    .tips {
      margin-top: 1vw;
      display: flex;
      justify-content: space-around;
    }
  }
}
.chart {
  height: 16vh;
  min-height: 18vh;
  margin: 0.5vw 0;
}
.pieContent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  .pieChart {
    height: 12vh;
    min-height: 14vh;
    margin: 0.5vw 0;
    width: 48%;
  }
}
</style>